<template>
	<view class="page">
		
		<view class="p_20">
			<view class="title">
				小游戏
			</view>
			
			<uni-row gutter="10" class="mt-10">
				<uni-col class="col" span="8" v-for="item in minis">
					<view class="item" @click="toMini(item.appid)">
						<image class="img" :src="item.icon"></image>
						<view class="mt_10">{{item.name}}</view>
					</view>
				</uni-col>
			</uni-row>
			<view class="title">
				笔趣阁
			</view>
			
			<uni-row gutter="10" class="mt-10">
				<uni-col class="col" span="8" v-for="item in bqgs">
					<view class="item" @click="toMini(item.appid)">
						<image class="img" :src="item.icon"></image>
						<view class="mt_10">{{item.name}}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minis:[{
					name:"去水印",
					icon:require('../../static/qsy.png'),
					appid:"wxe57a8c366b344b90"
				},
				{
					name:"答案之书",
					icon:require('../../static/dazs.png'),
					appid:"wx703d1b2e1b1818ba"
				},{
					name:"猜字谜",
					icon:require('../../static/czm.png'),
					appid:"wxfefb9705756d59e1"
				}],
				bqgs:[{
					name:"笔趣阁",
					icon:require('../../static/bqg.png'),
					appid:"wx11a2994f419d600a"
				},{
					name:"笔趣书亭",
					icon:require('../../static/bqg2.png'),
					appid:"wx34c6e7be65fde64f"
				},{
					name:"笔趣plus",
					icon:require('../../static/bqg3.png'),
					appid:"wx31e3e2271a23b918"
				},]
			}
		},
		methods: {
			toMini(appid) {
				uni.navigateToMiniProgram({
					appId:appid
				})
			}
		}
	}
</script>

<style lang="scss">
 .page {
	 display: flex;
	 flex-direction: column;
	 background-color: $uni-main-color;
	 width: 100%;
	 min-height: 100%;
	 
	 .p_20 {
		 padding: 20px;
	 }
	 .mt_10 {
		 margin-top: 10px;
	 }
	 .title {
	 	color:#FFF;
	 	font-size: 15px;
	 	height: 50px;
	 	line-height: 50px;
	 }
	 .col {
	 	
	 	width: 100%;
	 	
	 }
	 .item {
	 	
	 	
	 	color:#FFF;
	 	font-size: 15px;
	 	border: 1px solid #FFF;
	 	
	 	text-align: center;
	 	border-radius: 4px;
	 	display: flex;
	 	flex-direction: column;
	 	justify-content: center;
		align-items: center;
		padding-top: 20px;
		padding-bottom: 20px;
		
		.img {
			width:50px;
			height: 50px;
		
		}
	 }
 }
</style>
